<template>
  <div class="Page-playlist">
    <el-popover
      v-model="showPopover"
      placement="bottom-start"
      trigger="click"
      popper-class="el-popover-narrow"
    >
      <E-popover-playlist-classify :curTag="curTag" @onClick="cutClassify" />
      <el-button slot="reference" size="mini">
        {{curTag?curTag:'全部歌单'}}
        <i class="el-icon-arrow-down el-icon--right" />
      </el-button>
    </el-popover>
    <p class="wrap-tags">
      热门标签：
      <el-tag
        v-for="(tag, index) in tags"
        :key="index"
        :disable-transitions="true"
        @click="cutClassify(tag.name)"
        :effect="curTag===tag.name?'dark':'plain'"
      >{{tag.name}}</el-tag>
    </p>
    <div class="wraper-bocy" v-infinite-scroll="loadMore">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in playlists" :key="index">
          <E-playlist-card :item="item" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  components: {
    'E-popover-playlist-classify': () => import('./module/E-popover-playlist-classify'),
    'E-playlist-card': () => import('./module/E-playlist-card')
  },
  mounted() {
    this.getClassify(); // 获取热门标签
    this.cutClassify();
  },
  data() {
    return {
      playlists: [],
      showPopover: false,
      tags: [],
      curTag: '',
      offset: 0,
      timer: null
    };
  },
  methods: {
    loadMore() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.offset += 20;
        this.getData(this.curTag, this.offset, 20);
      }, 500);
    },
    cutClassify(tagNane = '') {
      this.showPopover = false;
      // eslint-disable-next-line no-param-reassign
      tagNane = this.curTag === tagNane ? '' : tagNane;
      this.curTag = tagNane;
      if (!tagNane) {
        this.offset = 0;
      }
      this.playlists = [];
      this.getData(tagNane, this.offset, 20);
    },
    getClassify() {
      this.$api.get('reco_playlist-classify', true).then(({ tags }) => {
        this.tags = tags;
      });
    },
    getData(cat = '', offset = 0, limit = 20) {
      this.$api.get('reco_playlist', {
        order: 'hot', cat, limit, offset
      }, true).then((data) => {
        this.playlists = [...this.playlists, ...data.playlists];
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.Page-playlist {
  padding: 20px;
  & > .wrap-tags {
    line-height: 32px;
    margin: 10px 0;
    & > .el-tag {
      cursor: pointer;
      margin-right: 7px;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}
</style>
